<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS基础语法</title>
  </head>
  <body>
    <div class="one">hello1</div>
    <div class="two">
      hello2hello2hello2hello2hello2hello2hello2hello2hello2
      hello2hello2hello2hello2hello2hello2hello2hello2hello2
      hello2hello2hello2hello2hello2hello2hello2hello2hello2
      hello2hello2hello2hello2hello2hello2hello2hello2hello2
      hello2hello2hello2hello2hello2hello2hello2hello2hello2
      hello2hello2hello2hello2hello2hello2hello2hello2hello2
      hello2hello2hello2hello2hello2hello2hello2hello2hello2
    </div>

    <div class="three">
      hello3hello3hello3 hello3hello3hello3 hello3hello3hello3
    </div>

    <div class="four">hello4 hello4 hello4 圆角矩形</div>

    <span class="five"> five！！！！！ </span>

    <div class="six">666666666 666666666 666666666</div>

    <div class="seven">
      <div class="eight">11111111</div>
      <div class="eight">22222222</div>
      <div class="eight">33333333</div>
      <div class="eight">44444444</div>
      <div class="eight">55555555</div>
    </div>
    <style>
      .eight {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        margin: 10px;
      }

      .seven {
        width: 100%;
        height: 1000px;
        background-color: yellow;
        display: flex;
        justify-content: space-between;
        align-items: space-between;
        flex-wrap: wrap;
      }
      
    
      * {
        box-sizing: border-box;
      }
      .six {
        background-color: gray;
        width: 500px;
        height: 500px;
        /* border: black 50px solid; */
        /* 颜色 粗度 样式 */
        border-top: #c03574 10px solid;
        border-bottom: green 20px dotted;
        border-left: blue 30px dashed;
        border-right: black 40px solid;

        padding-left: 10px;
        padding-top: 20px;
        padding-bottom: 30px;
        padding-right: 40px;

        margin-top: auto;
        margin-bottom: auto;
        margin-left: auto;
        margin-right: auto;
      }

      .five {
        font-size: 50px;
        width: 50px;
        height: 60px;
        background-color: #c03574;
        display: none;
      }

      .four {
        width: 300px;
        height: 300px;
        background-color: gray;
        border-radius: 150px;
      }

      .three {
        width: 4000px;
        height: 3600px;
        font-size: 100px;
        /* 背景颜色 */
        /* background-color: #c03574; */
        /*    背景图片   */
        background-image: url(海.jpg);
        background-repeat: no-repeat;
        background-color: #c03574;
        background-position: center;
        background-size: 4000px 3600px;
      }

      .two {
        font-weight: 500;
        /* 文本颜色 */
        color: #c03574;
        /* 文本对齐  左 中 右*/
        text-align: center;
        /* 文本装饰 上划线下划线*/
        text-decoration: line-through;
        /* 文本缩进,首行缩进多少空间*/
        text-indent: 20px;
        /* 行高 */
        line-height: 100px;
      }

      .one {
        /* 字体家族 */
        font-family: "微软雅黑";
        /* 字体大小 */
        font-size: 100px;
        /* 字体粗细 */
        font-weight: 100;
        /* 设置文字倾斜 */
        font-style: italic;
        /* 高亮 */
        background-color: yellow;
      }
    </style>
  </body>
</html>
